<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>网页快照系统</title>
    <link href="img/favicon.ico" rel="icon">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.6.8/dist/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" rel="stylesheet">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script crossorigin="anonymous"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="page-header"><h1>Welcome to LuoMing's Snapshot Server!</h1></div>
    </div>
    <div class="row">
        <div class="col-md-6 col-lg-6">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="form-group">
                        <label for="urlRecord">你想记录快照的网站：</label>
                        <div>
                            <input autocomplete="off" class="form-control" id="urlRecord" name="url"
                                   placeholder="https://cn.bing.com"
                                   required style="width: 80%; display: inline-block" type="text">
                            <input class="btn btn-primary" id="recordWebsite" type="button" value="提交">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-6">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="form-group">
                        <label for="urlFind">查找已经记录的网站：</label>
                        <div>
                            <input autocomplete="off" class="form-control" id="urlFind" name="url"
                                   placeholder="https://cn.bing.com"
                                   required style="width: 80%; display: inline-block" type="text">
                            <input class="btn btn-primary" id="findWebsite" type="button" value="提交">
                        </div>
                    </div>
                    <div id="snapshotList"></div>
                    <div id="laypage"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
  function urlMatch(url) {
    return url.match(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&amp;=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&amp;=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&amp;;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/) === null
  }

  function checkUrl(selector) {
    let urlInput = $(selector)
    let url = urlInput.val()
    console.log(url)
    if (urlMatch(url)) {
      layer.open({
        title: '网址格式错误！',
        content: '网址格式错误！请重新输入！'
      })
      urlInput.val('')
      return false
    }
    return url
  }

  $('#recordWebsite').on(
    'click',
    () => {
      let res_url = checkUrl('input#urlRecord')
      if (res_url === false) {
        return
      }
      let loading = layer.load()
      $.get(`/search?url=${res_url}`, (data) => {
        layer.close(loading)
        if (data.code === 200) {
          layer.open({
            title: '快照捕获成功！',
            content: '快照捕获成功！快去找找吧！'
          })
          console.log('快照捕捉成功！')
        } else {
          if (data.code === 502) {
            layer.open({
              title: '获取网页错误！',
              content: '请按照提示输入网站！<br>例如:http://www.bilibili.com, http://www.huaweicloud.com等<br>当 https 不能获取时可以试试 http，网址请以顶级域名结尾'
            })
          } else {
            layer.open({
              title: '快照上传失败！',
              content: '快照已获取，但是上传失败，请稍后再试！'
            })
          }
          console.log(data.data)
        }
      })
    }
  )
  $('#findWebsite').on(
    'click',
    () => {
      let res_url = checkUrl('input#urlFind')
      if (res_url === false) return
      let loading = layer.load()
      $.get(`/list?url=${res_url}&page=1`, (data) => {
        layer.close(loading)
        layui.use('laypage', function () {
          let laypage = layui.laypage;
          laypage.render({
            elem: 'laypage', //元素选择器
            count: data.data.total, //数据总数，从服务端得到
            limit: 5, //单页条数
            jump: (obj) => {
              $.get(`/list?url=${res_url}&page=${obj.curr}`, data => {
                $('#snapshotList').html(
                  `<div class="list-group">${
                    data.data.pageLinks.length === 0 ? '暂无数据' :
                    data.data.pageLinks.map((val) => {
                      return `<a class="list-group-item" href="${val}">${val.split('/').slice(-1)}</a>`
                    }).join('')
                  }</div>`
                )
              })
            }
          })
        })

      })
    }
  )
</script>
<script>
  layui.use('element', () => {
  })
  layui.use('layer', () => {
  })
  // 分页列表处理


</script>
</body>
</html>